Javascript Introduction
Comments in Javascript
Javascript Variables
Difference between var, let and const in Javascript
Datatypes
Assignment Operators
Logical Operators
Comparison Operators
Actions alert, prompt & confirm

Javascript Flow Control
Conditional Statements in Javascript
Nullish coalescing operator in Javascript
Break and Continue in Javascript
Loops in javascript
for loop in Javascript
while loop

Javascript Functions
Javascript Functions
JavaScript Arrow Function

Javascript Objects
Javascript Objects

Javascript Array
Javascript Arrays

Javascript Error Handling
Error Handling in Javascript

Javascript ES6
Set
Javascript Spread Operator
Rest Parameter in Javascript

Javascript Asynchronous
Javascript Callback Function
Promises in Javascript
Promise Chaining
Async-Await in Javascript

Javascript DOM
DOM Document
DOM Elements
DOM Attributes
DOM Manipulation
DOM Node Lists
Javascript Events
DOM Traversing Elements
DOM EventListener

Javascript Class
Classes in javascript
Class Inheritance

Javascript Design Principles
SOLID - The Single responsibility principle in javascript
SOLID - Open-Closed principle in Javascript

Other Topics
Javascript Hoisting
Filter, Map and Reduce functions in Javascript
Closure in Javascript
Optional chaining operator in Javascript
Consoling in table format in javascript
Fetch API in Javascript
HTML web Storage API
Checking the online or offline status of the browser

Fetch API in Javascript

In this article we will learn how to use fetch() to make api call in javascript. Before the arrival of this fetch() api we have been using 'XMLHttpRequest' to make Ajax call in javascript. The 'XMLHttpRequest' method uses callback to retrieve the result and this method is slower than the Fetch api. The Fetch api will return a promise and it is faster than the 'XMLHttpRequest' method.

Fetch API provides us with fetch() method for making api request, that is provided by window object. The fetch() method will return a promise as a result. The promise may resolve to provide result object or it can reject when there is network problem or the requested url is not found which may return 500 or 404 status code.

The response properties contain two properties to determine whether the request has succeeded or not.

status - This will return the http status code. If the request has successfully completed then it returns 200-299 code else it returns 404 if not found and 500 if server error.
ok - It return true if request is successful else returns false if request has failed.

Example 1

            fetch("https://reqres.in/api/users?page=2")
      .then((response) => response.json())
	  .then((result)=> console.log(result));

        

In the above example, we make api call to an url. It returns the promise. Now we convert the response to JSON representation. In order to retrieve the original JSON payload response we need to chain the promise once again.

Example 2

            fetch("https://reqres.in/api/users?page=2")
      .then((response) => {
        if (response.ok) {
          return response.json();
        } else {
          throw new Error("Cant retrieve information from api");
        }
      })
      .then((result) => {
        console.log(result);
      }).catch((error)=>{
		console.log(error);
	  });
        

In this example, we have modified the Example 1 code to make it more reliable by handling error. Here we check whether the 'ok' property of response return true or false. If it returns true then it returns the response.json() else it would throw an error which will be handled by the catch block.

Note:

The json() of the response object return the promise. This is because response return by the HTTP is in the form of stream to the client chunk by chunk.

To represent the above example using async/await without promise chaining. We rewrite the above example as below.

Example 3

            let userDetails = async () => {
      try {
        let response = await fetch("https://reqres.in/api/users?page=2");
        let result = await response.json();
        console.log(result);
      } catch (error) {
        console.log(error);
      }
    };

    userDetails();

        

This is really simple. Initially we make api call to an url and obtain a response. Now we need to transform the response to json by calling the json() function in response parameter. If any error occurs its will be catched by the catch block. We put the block of code to a function and prefix the function with async keyword in order to use await.

Fetch api also provide us with the method of providing additional options to add additional information.

Syntax

let promise = fetch(url, [options]);

In the options we can mention the method, headers and body to give additional information. Below is an example of how to make a POST call and pass some parameters as body of the api.

Example 3

            let userDetails = async () => {
      try {
        let response = await fetch("https://reqres.in/api/users", {
          method: "POST",
          headers: {
            "Content-Type": "application/json;charset=utf-8",
          },
          body: JSON.stringify({
            name: "morpheus",
            job: "leader",
          }),
        });
        let result = await response.json();
        console.log(result);
      } catch (error) {
        console.log(error);
      }
    };

    userDetails();

        

In the above example, we have provided method, headers and body as options parameter to make a POST api call.

Summary:

The methods available in response body

response.json() - Parses the response as JSON object.
response.text()- Returns the response as text.
response.formData() - Returns the response as object of type FormData.
response.blob() - Returns the response as Blob.
response.arrayBuffer() - Returns the response as ArrayBuffer.

Options available in fetch

method - HTTP methods(GET, POST, PUT, DELETE)
headers - Attach any request headers.
body - The data to be sent which can be of type string, FormData, Blob or UrlSearchParams, BufferSource object.

Fetch API in Javascript

Categories

Most Read